
/* 애니메이션 키프레임 */
@keyframes drawTop {
    to {
        width: 100%;
    }
}

@keyframes drawBottom {
    to {
        width: 100%;
    }
}

@keyframes drawLeft {
    to {
        height: 100%;
    }
}

@keyframes drawRight {
    to {
        height: 100%;
    }
}

@keyframes imagemove {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        -moz-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        -o-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }

    100% {
        -webkit-transform: rotate(5deg) scale(1.1);
        -moz-transform: rotate(5deg) scale(1.1);
        -ms-transform: rotate(5deg) scale(1.1);
        -o-transform: rotate(5deg) scale(1.1);
        transform: rotate(5deg) scale(1.1)
    }
}

.light-effect-1 {
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-30deg);
    animation: shine 7s infinite;
}

.light-effect-2 {
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(80deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-30deg);
    animation: shine 5s infinite;
}

@keyframes shrink {
    0% {
        transform: scale(1.1); /* 원래 크기 */
    }
    100% {
        transform: scale(1); /* 50% 크기로 축소 */
    }
}


@keyframes shine {
    0% {
        left: -150%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%; /* 딜레이 역할 */
    }
}